<template>
  <div>
    <div class="registered">
      <div
        class="mobil"
        :class="{active:item.id==indexid}"
        v-for="item in  list"
        :key="item.id"
        @click="changeitem(item)"
      >{{item.name}}</div>
      <!-- <div class="mobil">邮箱注册</div> -->
    </div>
    <component :is="com"></component>
  </div>
</template>


<script>
import mobilzhuce from "./mobilzhuce.vue";
import mailzhuce from "./mailzhuce.vue";
export default {
  data() {
    return {
      com: "mobilzhuce",
      indexid: 1,
      list: [
        { id: 1, name: "手机注册", com: "mobilzhuce" },
        { id: 2, name: "邮箱注册", com: "mailzhuce" }
      ]
    };
  },
  methods: {
    changeitem(item) {
      this.indexid = item.id;
      this.com = item.com;
    }
  },
  components: {
    mobilzhuce,
    mailzhuce
  }
};
</script>

<style scoped>
.registered {
  width: 100%;
  display: flex;
  align-items: center;
}
.mobil,
.mail {
  font-size: 14px;
  color: #999;
  background: #fbfbfb;
  text-align: center;
  line-height: 40px;
  height: 40px;
  width: 50%;
}
.active {
  background-color: black !important;
  color: white !important;
}
</style>
